<template>
  <div v-if="visible" class="diff-modal">
    <!-- 关闭按钮 -->
    <button class="close-button" @click="closeModal">×</button>

    <!-- 对比框 -->
    <div class="diff-container">
      <code-diff :old-string="displayOldText" :new-string="displayNewText" :context="displayContext"
        :outputFormat="displayOutputFormat" />
    </div>
    <!-- 配置框 -->
    <div class="config-form">
      <el-form :model="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="当前版本文本 (String)">
              <el-input v-model="form.oldText" type="textarea" :rows="6" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择版本文本 (String)">
              <el-input v-model="form.newText" type="textarea" :rows="6" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="上下文行数 (context)">
              <el-input-number v-model="form.context" :min="1" :max="100" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="输出格式 (outputFormat)">
              <div>
                <el-radio v-model="form.outputFormat" label="side-by-side" border>并排显示 (side-by-side)</el-radio>
                <el-radio v-model="form.outputFormat" label="line-by-line" border>逐行显示 (line-by-line)</el-radio>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="applyConfig">使用</el-button>
              <el-button type="primary" @click="closeModal">取消</el-button>
              <el-button type="primary" @click="cs">测试按钮</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import CodeDiff from 'vue-code-diff';
import mammoth from 'mammoth';

export default {
  components: {
    CodeDiff,
  },
  props: {
    // 当前使用的版本信息
    selectedFile: {
      type: Object,
      default: () => [{}],
      required: false
    },
    fileVersionData: {
      type: Object,
      default: () => { },
      required: false
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        // 现用版本
        oldText: ``,
        // 选择版本
        newText: ``,
        context: 10,
        outputFormat: 'side-by-side',
      },
      // 编辑框内容
      displayOldText: '',
      displayNewText: '',
      displayContext: 10,
      displayOutputFormat: 'side-by-side',
    };
  },
  mounted() {
    this.applyConfig();
  },
  methods: {
    cs(){
      console.log("selectedFile: ",this.selectedFile);
      console.log("fileVersionData: ",this.fileVersionData);
    },
    closeModal() {
      this.$emit('close');
    },
    // 获取当前版本与选择版本文本
    async applyConfig() {
      try {
        this.form.oldText = await this.getFileText(this.selectedFile.filePath);
        this.form.newText = await this.getFileText(this.fileVersionData.storagePath);
      } catch (err) {
        this.error = err.message;
        console.error('获取文件内容失败:', err);
      }
      this.displayOldText = this.form.oldText;
      this.displayNewText = this.form.newText;
      this.displayContext = this.form.context;
      this.displayOutputFormat = this.form.outputFormat;
    },
    async getFileText(url) {
      const baseUrl = url.split('?')[0];
      const ext = baseUrl.split('.').pop().toLowerCase();
      const res = await fetch(url);
      return ext === 'docx'
        ? (await mammoth.extractRawText({ arrayBuffer: await res.arrayBuffer() })).value
        : await res.text();
    }
  }
};
</script>

<style scoped>
.diff-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 50px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  z-index: 9999 !important;
  /* 确保下拉框不会被其他元素遮挡 */
}

.close-button:hover {
  color: #000;
}

.diff-container {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  background: #f9f9f9;
}

.config-form {
  margin-top: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-textarea {
  font-family: monospace;
  font-size: 14px;
}

.el-select {
  width: 100%;
}

.custom-select {
  z-index: 9999 !important;
  /* 确保下拉框不会被其他元素遮挡 */
}
</style>